<template>
  <div ref="barChart" class="echartBox" :style="{width: '800px', height: '300px'}" />
</template>

<script>
// 引入基本模板
const echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  name: 'Bar',
  data() {
    return {}
  },
  mounted() {
    this.drawBar()
  },
  methods: {
    drawBar() {
      const myCharts = echarts.init(this.$refs.barChart)
      myCharts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            max: 12,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            height: '350px'
          }
        ],
        series: [
          {
            name: '参与人数',
            type: 'bar',
            barWidth: '50%',
            color: 'rgba(24, 144, 255, 0.847058823529412)',
            data: [10, 52, 200, 334, 390, 330, 220, 834, 390, 330, 220, 220],
            barGap: '80%'
          }
        ]
      })
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
